<table border="1">
    <tr>
        <th><input type="checkbox"></th>
        <th>单元格2</th>
        <th>单元格3</th>
        <th>单元格4</th>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>单元格2</td>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>单元格2</td>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>单元格2</td>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>
<script>
    var oneChecked = document.querySelectorAll('td>input');
    var allChecked = document.querySelector('th>input');

    allChecked.onclick = function() {
        for (var i = 0; i < oneChecked.length; i++) {
            if (this.checked) {
                oneChecked[i].checked = true;
            } else {
                oneChecked[i].checked = false;
            }
        }
    }

    oneChecked.forEach(function(ele) {
        ele.onclick = function() {
            var checkedEle = document.querySelectorAll('td>input:not(:checked)');

            if (!checkedEle.length) {
                allChecked.checked = true;
            } else {
                allChecked.checked = false;
            }
        }
    })
</script>